<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" @selection-change="handleSelectionChange"
                    style="border-radius: 10px; overflow: hidden;">
                    <el-table-column type="selection" width="55">
                    </el-table-column>

                    <el-table-column label="产品" prop="imgSrc">
                        <template slot-scope="scope">
                            <img :src="require('../assets/' + scope.row.imgsrc)"
                                style="width:200px; height:200px; object-fit: cover; border-radius: 8px;">
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="buyPrice" label="商品单价">
                    </el-table-column>

                    <el-table-column prop="buyNum" label="购买数量">
                    </el-table-column>
                    <el-table-column prop="totalPrice" label="小计">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-row style="margin-top: 20px;">
            <el-col :span="5" :offset="18" style="display: flex; align-items: center; justify-content: space-between;">
                <span style="font-size: 16px; color: #333;">应付金额：</span>
                <span style="margin-right: 20px; color: red; font-size: 20px; font-weight: 600;">￥{{ price }}</span>
                <el-button type="primary" @click="addOrder"
                    style="height: 40px; font-size: 16px; border-radius: 18px; padding: 0 20px;">
                    点我下单
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            price: 0,
            tableData: [],
            multipleData: [],
        }
    },
    methods: {
        addOrder() {
            // 检查用户是否选中了商品
            if (this.multipleData.length === 0) {
                this.$message({
                    message: '请先选择商品！',
                    type: 'warning'
                });
                return;
            }
            //用户下单
            let ids = []
            //购物车id集合
            this.multipleData.forEach(e => {
                ids.push(e.id)
            })
            let param = { ids };
            console.log(param);
            this.$axios.post('api/order/addOrder', param)
                .then(response => {
                    if (response.data.code == 200 && response.data.data != null) {
                        //库存不足的情况
                        this.$message({
                            message: '库存不足 ٩(T-T)۶ ',
                            type: 'error'
                        })
                        return;
                    }
                    if (response.data.code == 200) {
                        //下单成功,跳转页面，把步骤条的变量active改为2
                        this.$emit('setActive', 2)
                        this.$router.push('/confirm')
                    }
                })
        },
        queryUserCart() {
            //查询用户购物车信息
            this.$axios.get('api/order/queryUserCart')
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.userCarts;
                    }
                })
        },
        handleSelectionChange(val) {
            //多选事件
            this.multipleData = val;
            this.price = 0;
            val.forEach(e => {
                this.price += e.totalPrice
            })
        },
    },

    created() {
        this.queryUserCart();
    }
}
</script>

<style scoped>
.useraddress {
    width: 300px;
    height: 120px;
    border: 1px solid;
    margin: auto 10px;
}

.el-button--primary {
    width: 150px;
    height: 70px;
    font-size: 20px;
}

p {
    margin: 5px;
    font-size: 34 px;
    padding: 5px 2px;
}

/* 表格样式 */
.el-table {
    border: 1px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
}

/* 表格列 */
.el-table-column {
    font-size: 100px;
    text-align: center;
    padding: 10px 0;
}

.el-table th {
    background-color: #f4f4f4;
    color: #555;
    font-weight: 500;
}

/* 优化按钮和金额部分 */
.el-button--primary {
    background-color: #409EFF;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.el-button--primary:hover {
    background-color: #66b1ff;
}

/* 应付金额部分 */
.el-row {
    margin-top: 20px;
}

span {
    font-size: 36px;
    color: #333;
}
</style>
